<style>
    blockquote, body, button, code, dd, div, dl, dt, fieldset, figure, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
    }
    .loginHtml{
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #fff;
    }
    .title{
        width: 1600px;
        display: flex;
        justify-content: space-between;
        margin-right: auto;
        margin-left:auto ;
    }
    .title .title-1{
        background-image: url(//member-ssl.vipstatic.com/img/passport/sprites-hash-c9975078.png?1d3187cc);
        background-position: -308px -57px;
        width: 125px;
        height: 100px;
        display: inline-block;
        vertical-align: top;
        line-height: 500px;
        overflow: hidden;
    }
    
    .title .pecu{
        background-image: url(//member-ssl.vipstatic.com/img/passport/sprites-hash-c9975078.png?1d3187cc);
        background-position: 0 0;
        width: 304px;
        height: 100px;
        position: absolute;
        margin-right: 200px;
        top: 0;
        right: 0;
        z-index: 1;
    }
    .body{
        height: 650px;
        background-position: top center;
        background-repeat: no-repeat
    }
    .body-content{
        margin-right: auto;
        margin-left: auto;
        padding: 50px 20px;
        min-height: 550px;
        width: 1000px;
    }
    .regist{
        width: 380px;
        border-radius: 2px;
        background-color: #fff;
        float: right;
        font-family: "微软雅黑";
    }
    .regist-header{
        padding-right: 30px;
        padding-left: 30px;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #e0e0e0;
        overflow: hidden
    }
    .regist-header .regist-title{
        font-size: 18px;
        color: #666;
        margin: 0;
        padding: 0;
        float: left;
    }
    .regist-header>div{
        float: right;
        font-size: 14px;
    }
    .regist-header>div router-link{
        color: #f10180;
    }
    .regist-body{
        padding: 30px;
    }
    .form {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        padding-top:20px ;
    }
    .el-form{
    width: 90%;
    }
    .el-form-item{
        position: relative;
        display: inline-block;
        vertical-align: top;
        -webkit-transition: none !important;
        transition: none !important;
        -webkit-transition-duration: none !important;
        transition-duration: none !important;
        opacity: 1 !important;
    }
    .el-form .el-form-item .el-input{
        padding-left: 40px;
        width: 250px;
        height: 32px;
        line-height: 32px;
    }
    .el-button{
        padding: 10px;
    }
    .el-button{
        width: 300px;
        padding: 10px;  
        height: 50px;
        background-color: #f10180;
        font-size: 20px;
        color: #fff;
    }
    .el-button:hover{
        background-color: #f10180;
        color: #fff;
    }
    .qr-from{
        margin-left: 20px;
        margin-top: 15px;
        margin-bottom: 20px;
    }
    .qr-input{
        vertical-align: top;
        margin-top: 2px;
    }
    .qr-input input{
        vertical-align: text-top;
        /* display: none; */
    }
    .qr-link{
        color: #1d94d1;
        display: inline-block;
        vertical-align: middle;
        font-size: 12px;
        line-height: 1.5;
    }
    .qr-tip{
        font-size: 12px;
        color: #ec5042;
        position: relative;
        min-height: 19px;
        max-height: 36px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-top: 2px;
        margin-bottom: 5px;
        line-height: 1.5;
        display: block;
    }
</style>
<template>
    <div>
        <div>
            
        </div>
        <div class="loginHtml">
            <!-- h头部 -->
            <div class="title">
                <div class="logo">
                    <div class="title-1">唯品会</div>
                </div>
                <!-- 三大特点 -->
                <div class="pecu">
                    
                </div>
            </div>
            <!-- 登录 -->
            <div class="body" style="background-image: url(&quot;//b.appsimg.com/upload/momin/2020/12/14/15/1607915393371.jpg&quot;);" data-bg="true">
                <div class="body-content">
                    <div class="regist">
                        <!-- 注册头部 -->
                        <div class="regist-header">
                            <div>
                                已注册可
                                <router-link to="/">直接登录</router-link>
                            </div>
                            <h3 class="regist-title" @click="getList">会员注册</h3>
                        </div>
                        <!-- 注册内容 -->
                        <div class="regist-body">
                            <div class="form">
                                <el-form :model="form" :rules="rules"  ref="form" label-width="0px">
                                    <el-form-item prop="username" style="margin-bottom: 20px;">
                                        <el-input v-model="form.username"  prefix-icon="el-icon-user-solid" placeholder="请输入用户名" ></el-input>
                                    </el-form-item>
                                    <el-form-item prop="password">
                                        <el-input v-model="form.password"  prefix-icon="el-icon-lock" type="password" placeholder="请输入密码"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="password1">
                                        <el-input v-model="form.password1"  prefix-icon="el-icon-lock" type="password" placeholder="请再次输入密码"></el-input>
                                    </el-form-item>
                                    <div class="qr-from">
                                        <div class="qr-input">
                                            <input type="checkbox" id="qr-input">
                                            <label for="qr-input">
                                                我已阅读并接受以下条款：
                                                <a href="https://h5rsc.vip.com/h5rscSupportClause/h5rscSupportClause/index.html" class="qr-link">《唯品会服务条款》</a>
                                                <a href="https://h5rsc.vip.com/h5rscSupportClause/h5rscSupportClause/index.html" class="qr-link">《唯品会基本功能隐私政策》</a>
                                            
                                            </label>
                                        </div>
                                    </div>
                                    <el-form-item>
                                        <el-button type="primary" @click="register">立即注册</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <footers></footers>
        </div>
    </div>
</template>
<script>
    import {regist} from "@/request/api/all"
    import {getData} from "@/request/api/all"
    import footers from "@/components/footer"
     export default {
        components: {
            footers
        },
        data() {
            return {
                form:{
                    username:"",
                    password:"",
                    password1:""
                },
                rules:{
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 2, max: 8, message: '用户名格式不对', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 5, max: 8, message: '长度在 5 到 8 个字符', trigger: 'blur' }
                    ],
                    password1: [
                        { required: true, message: '请再次输入密码', trigger: 'blur' },
                        { min: 5, max: 11, message: '长度在 5 到 8 个字符', trigger: 'blur' }
                    ],
               }
            }
        },
        methods:{
            register(){
            this.$refs.form.validate(async(valid) =>{
                if (valid) {
                    console.log('注册!');
                    let res = await regist('/regist',{
                        username:this.form.username,
                        password:this.form.password
                    })
                    console.log("res",res)
                    let {token} = res.data
                    localStorage.setItem('token',token)

                    // 页面跳转
                    this.$router.push({
                        path:"/"
                    })
                } else {
                    console.log('注册失败!!');
                }
            })
           },
           reset(){
            this.$refs.form.resetFileds()
           },
           async getList(){
                console.log("获取数据")
                let res = await getData('/getList')
                console.log(res)
           }
        },
        created(){
            this.getList()
        }   
    }
</script>